<template>
    <div class="view">
        <div class="coffeelist1">
            <div class="utitle">
                <img src="../assets/coffeeicon.png"
                    style="width: 50px;height: 50px;vertical-align: bottom;margin-right: 10px;" alt="">
                <span style="margin-right: 10px;">精选咖啡</span>
                精选人气咖啡，每一口都是独特的味觉盛宴
            </div>
            <div class="coffeelist">
                <el-card class="coffeeitem" v-for="item in coffeelist" >
                    <div class="coffeeicon">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="coffeeinfo">
                        <div class="coffeename">{{ item.name }}</div>
                        <div class="coffeenum">
                            <div class="price">
                                ￥{{ item.price }}
                            </div>
                            <div class="hassale">已售{{ item.buyNum }}</div>
                        </div>
                    </div>

                    <div style="text-align: right;">
                        <el-button @click="todetail(item)" size="small" type="primary" plain>详情</el-button>
                    </div>
                </el-card>
            </div>

        </div>
    </div>
</template>
<script>

import service from '@/request';
export default {
    data() {
        return {
            typelist: [],
            coffeelist: []
        }
    },
    mounted() {

        this.getcoffeeTop()
    },
    methods: {
        todetail(item){
            console.log("123")
            this.$router.push({
                path:"/shopdetail",
                query:{
                    id:item.id
                }
            })
        },
        async getcoffeeTop() {
            const res = await service.get("/info/list", {
                params: {
                    pageNum: 1,
                    pageSize: 10000000
                }
            });
            console.log(res)
            this.coffeelist = res.data.records
        },

    }
}
</script>
<style scoped>
.coffeeinfo {
    width: 100%;

    padding: 10px;
    box-sizing: border-box;

}

.coffeename {
    font-size: 20px;
}

.coffeeitem {
    width: 20%;
    margin-right: 10px;
    margin-bottom: 10px;
}

.coffeeicon img {
    width: 100%;
    height: 200px;
}

.coffeeicon {
    width: 100%;
}

.typelist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;

}

.utitle {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
}

.utitle span {
    font-size: 40px;
    color: #333;
}

.typeitem {
    width: 20%;
    text-align: center;
}

.typeitem img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.carousal {
    width: 100%;
    margin-bottom: 10px;
}

.view {
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
}

.imgcar {
    width: 100%;
    height: 100%;
}

.coffeelist {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.coffeenum {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
}

.price {
    color: red;
    font-weight: bold;
    font-size: 24px;
}

.hassale {
    color: #ccc;
    font-size: 14px;
}
</style>